<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="院系名称" style="width: 200px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableListData" v-bind="tableConfig" height="100%">
			<el-table-column prop="name" label="院系名称" min-width="300" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160" />
			<el-table-column label="操作" width="158" align="right" header-align="left">
				<template slot-scope="{ row }">
					<el-button size="medium" type="text" @click="handleAddChildren(row)">添加子级</el-button>
					<el-button size="medium" type="text" @click="handleOpenDialog(row.id)">修改</el-button>
					<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="tableData" :is-sub="isChildren" @refresh="queryTableData()" />
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getDepartTree, deleteDepart } from '@/api/system/tbSysDept';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '院系',
			isChildren: false,
			tableConfig: {
				ref: 'table',
				rowKey: 'id',
				size: 'medium',
				defaultExpandAll: false,
				treeProps: { hasChildren: 'hasChildren', children: 'childList' }
			},
			queryName: ''
		};
	},
	computed: {
		listFunction() {
			return eval(getDepartTree);
		},
		deleteFunction() {
			return eval(deleteDepart);
		},
		requestParams() {
			return { basePId: '0' };
		},
		tableListData() {
			let name = this.queryName.toLowerCase();
			return this.$filterTreeByKey(this.tableData, name, 'name', 'childList');
		}
	},
	watch: {
		queryName() {
			this.$refs['table'].doLayout();
		}
	},

	methods: {
		//查询院系
		handleQueryData() {
			this.queryName = lodash.cloneDeep(this.queryData.name);
		},

		//添加子级
		handleAddChildren(data) {
			this.dataId = data.id;
			this.formDialog = true;
			this.isChildren = true;
		}
	}
};
</script>

<style lang="scss" scoped></style>
